<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">

	<meta name="description" content=" 		Instead of displaying the date in a text box, this demo saves dates in the drop-down menus. 		Click the '...' button to display the calendar. 		The drop-down menus are updated, as you select dates in the calendar. 		The Year drop-down menu has a restricted number of years being displayed. ">
	<meta name="keywords" content="dhtml tools,javascript,DHTML Tools,Javascript,ajax,AJAX,Ajax,ajax tools,AJAX Tools,tools controls,simple javascript tools">
	<title>Zapatec DHTML Calendar Widget - Update Drop-down Menus from a Calendar</title>

	<!-- Common JS files -->
	<script type='text/javascript' src='../../utils/zapatec.js'></script>

	<!-- Custom includes -->	
		<!-- import the calendar script -->
		<script type='text/javascript' src='../../utils/zpdict.js'></script>
		<script type="text/javascript" src="../../utils/lang/zpdate-en.js"></script>
		<script type="text/javascript" src="../../utils/zpdate.js"></script>
		<script type="text/javascript" src="../src/calendar.js"></script>

		<!-- other languages might be available in the lang directory; please check
		your distribution archive. -->


	<!-- ALL demos need these css -->
	<link href="../../website/css/zpcal.css" rel="stylesheet" type="text/css">
	<link href="../../website/css/template.css" rel="stylesheet" type="text/css">
	<style type="text/css">
		body {
			width: 778px;
		}
	</style>

	<!-- Theme css -->
	<link href="../themes/winter.css" rel="stylesheet" type="text/css">

	<link rel="SHORTCUT ICON" href="http://www.zapatec.com/website/main/favicon.ico">
	

<script type="text/javascript">
	function updateSelect(cal) {
		var date = cal.date;
		var selectMonth = document.getElementById("selectMonth");
		selectMonth.selectedIndex = date.getMonth();
		var selectDay = document.getElementById("selectDay");
		selectDay.selectedIndex = (date.getDate() - 1);
		var selectYear = document.getElementById("selectYear");
		selectYear.selectedIndex = (date.getFullYear() - 2000);
	}
</script>


</head>
<body>	<div class='zpCalSubHeader' style='text-align:center;'>Update Drop-down Menus from a Calendar</div>

		<div class='zpCalDemoText'>
			<ul>
				<li>This demo uses the <b>winter theme</b>.</li>
				
		<li>Instead of displaying the date in a text box, this demo saves dates in the drop-down menus.</li>
		<li>Click the '...' button to display the calendar.</li>
		<li>The drop-down menus are updated, as you select dates in the calendar.</li>
		<li>The Year drop-down menu has a restricted number of years being displayed.</li>

			</ul>
		</div>



<form action="">
	<SELECT name="month" id="selectMonth">
		<OPTION VALUE="0" selected="selected">January</OPTION>
		<OPTION VALUE="1">February</OPTION>
		<OPTION VALUE="2">March</OPTION>
		<OPTION VALUE="3">April</OPTION>
		<OPTION VALUE="4">May</OPTION>
		<OPTION VALUE="5">June</OPTION>
		<OPTION VALUE="6">July</OPTION>
		<OPTION VALUE="7">August</OPTION>
		<OPTION VALUE="8">September</OPTION>
		<OPTION VALUE="9">October</OPTION>
		<OPTION VALUE="10">November</OPTION>
		<OPTION VALUE="11">December</OPTION>
	</SELECT>

	<SELECT name="day" id="selectDay">
		<OPTION VALUE="1" selected="selected">1</OPTION>
		<OPTION VALUE="2">2</OPTION>
		<OPTION VALUE="3">3</OPTION>
		<OPTION VALUE="4">4</OPTION>
		<OPTION VALUE="5">5</OPTION>
		<OPTION VALUE="6">6</OPTION>
		<OPTION VALUE="7">7</OPTION>
		<OPTION VALUE="8">8</OPTION>
		<OPTION VALUE="9">9</OPTION>
		<OPTION VALUE="10">10</OPTION>
		<OPTION VALUE="11">11</OPTION>
		<OPTION VALUE="12">12</OPTION>
		<OPTION VALUE="13">13</OPTION>
		<OPTION VALUE="14">14</OPTION>
		<OPTION VALUE="15">15</OPTION>
		<OPTION VALUE="16">16</OPTION>
		<OPTION VALUE="17">17</OPTION>
		<OPTION VALUE="18">18</OPTION>
		<OPTION VALUE="19">19</OPTION>
		<OPTION VALUE="20">20</OPTION>
		<OPTION VALUE="21">21</OPTION>
		<OPTION VALUE="22">22</OPTION>
		<OPTION VALUE="23">23</OPTION>
		<OPTION VALUE="24">24</OPTION>
		<OPTION VALUE="25">25</OPTION>
		<OPTION VALUE="26">26</OPTION>
		<OPTION VALUE="27">27</OPTION>
		<OPTION VALUE="28">28</OPTION>
		<OPTION VALUE="29">29</OPTION>
		<OPTION VALUE="30">30</OPTION>
		<OPTION VALUE="31">31</OPTION>
	</SELECT>

	<SELECT name="year" id="selectYear">
		<OPTION VALUE="2000" selected="selected">2000</OPTION>
		<OPTION VALUE="2001">2001</OPTION>
		<OPTION VALUE="2002">2002</OPTION>
		<OPTION VALUE="2003">2003</OPTION>
		<OPTION VALUE="2004">2004</OPTION>
		<OPTION VALUE="2005">2005</OPTION>
		<OPTION VALUE="2006">2006</OPTION>
		<OPTION VALUE="2007">2007</OPTION>
		<OPTION VALUE="2008">2008</OPTION>
		<OPTION VALUE="2009">2009</OPTION>
		<OPTION VALUE="2010">2010</OPTION>
		<OPTION VALUE="2011">2011</OPTION>
		<OPTION VALUE="2012">2012</OPTION>
	</SELECT>

	<input type="button" value=" ... " id='button10'>
</form>
<div id="sel10"></div>
		<script type="text/javascript">
		var cal = new Zapatec.Calendar({
		
		inputField     :    "sel10",     // id of the input field
		ifFormat       :    "%Y-%m-%d",     // format of the input field
		button         :    "button10",  // What will trigger the popup of the calendar
		onUpdate       :     updateSelect,
		range          :     [2000, 2012],
		theme          :     "winter"

		});
		
		
	</script>

	<noscript>
		<br/>
		This page uses an <a href='http://www.zapatec.com/website/main/products/suite/'>
		AJAX Component</a> - Zapatec DHTML Calendar Widget, but your browser does not support Javascript.
		<br/>
		<br/>
	</noscript>
		<br/><br/><br/>
		<div class="footer" style='width: 778px; text-align:center; margin-top:2em'>
		&copy; 2004-2009 <strong> <a href='http://www.zapatec.com/'>Zapatec, Inc.</a> </strong>
		</div>
</body>
</html>
